<template>
  <div class="home">
    <canvas id="canvas"></canvas>
  </div>
</template>

<script>
import { Game, GameObject, resource, RESOURCE_TYPE, LOAD_EVENT } from '@eva/eva.js';
import { RendererSystem } from '@eva/plugin-renderer';
import { Img, ImgSystem } from '@eva/plugin-renderer-img';
import { LottieSystem, Lottie } from '@eva/plugin-renderer-lottie'
import { Sprite, SpriteSystem } from '@eva/plugin-renderer-sprite'
import { SpriteAnimation, SpriteAnimationSystem } from '@eva/plugin-renderer-sprite-animation';
import { Text, TextSystem } from '@eva/plugin-renderer-text';
import { Transition, TransitionSystem } from '@eva/plugin-transition';
import { Mask, MaskSystem, MASK_TYPE } from '@eva/plugin-renderer-mask';
import { Graphics, GraphicsSystem } from '@eva/plugin-renderer-graphics';
import { Render, RenderSystem } from '@eva/plugin-renderer-render';
import Vconsole from 'vconsole';
export default {
  name: 'HomeView',
  components: {
  },
  mounted() {
    console.log('进来了');
    if (process.env.NODE_ENV === 'prd') {
      new Vconsole();
    }
    const baseUrl = process.env.NODE_ENV === 'prd' ? '/demo/' : '';
    resource.addResource([
      {
        name: 'qiu',
        type: RESOURCE_TYPE.SPRITE_ANIMATION,
        src: {
          image: {
            type: 'png',
            url: baseUrl + '/qiu-0.png',
          },
          json: {
            type: 'json',
            url: baseUrl + '/qiu-0.json',
          },
        },
        preload: true,
      },
      {
        name: 'qiuS',
        type: RESOURCE_TYPE.SPRITE_ANIMATION,
        src: {
          image: {
            type: 'png',
            url: baseUrl + '/qiuS.png',
          },
          json: {
            type: 'json',
            url: baseUrl + '/qiuS.json',
          },
        },
        preload: true,
      },
      {
        name: 'qiuS2',
        type: RESOURCE_TYPE.SPRITE_ANIMATION,
        src: {
          image: {
            type: 'png',
            url: baseUrl + '/qiuS2.png',
          },
          json: {
            type: 'json',
            url: baseUrl + '/qiuS2.json',
          },
        },
        preload: true,
      },
      {
        name: 'ban',
        type: RESOURCE_TYPE.SPRITE_ANIMATION,
        src: {
          image: {
            type: 'png',
            url: baseUrl + '/ban2.png',
          },
          json: {
            type: 'json',
            url: baseUrl + '/ban2.json',
          },
        },
        preload: true,
      },
      {
        name: 'qiu-1',
        type: RESOURCE_TYPE.SPRITE_ANIMATION,
        src: {
          image: {
            type: 'png',
            url: baseUrl + '/qiu-1.png',
          },
          json: {
            type: 'json',
            url: baseUrl + '/qiu-1.json',
          },
        },
        preload: true,
      },
      {
        name: 'qiu1',
        type: RESOURCE_TYPE.SPRITE_ANIMATION,
        src: {
          image: {
            type: 'png',
            url: baseUrl + '/qiu1.png',
          },
          json: {
            type: 'json',
            url: baseUrl + '/qiu1.json',
          },
        },
        preload: true,
      },
      {
        name: 'qiu2',
        type: RESOURCE_TYPE.SPRITE_ANIMATION,
        src: {
          image: {
            type: 'png',
            url: baseUrl + '/qiu2.png',
          },
          json: {
            type: 'json',
            url: baseUrl + '/qiu2.json',
          },
        },
        preload: true,
      },
      {
        name: 'qiu3',
        type: RESOURCE_TYPE.SPRITE_ANIMATION,
        src: {
          image: {
            type: 'png',
            url: baseUrl + '/qiu3.png',
          },
          json: {
            type: 'json',
            url: baseUrl + '/qiu3.json',
          },
        },
        preload: true,
      },
      {
        name: 'qiu4',
        type: RESOURCE_TYPE.SPRITE_ANIMATION,
        src: {
          image: {
            type: 'png',
            url: baseUrl + '/qiu4.png',
          },
          json: {
            type: 'json',
            url: baseUrl + '/qiu4.json',
          },
        },
        preload: true,
      },
      {
        name: 'qiu5',
        type: RESOURCE_TYPE.SPRITE_ANIMATION,
        src: {
          image: {
            type: 'png',
            url: baseUrl + '/qiu5.png',
          },
          json: {
            type: 'json',
            url: baseUrl + '/qiu5.json',
          },
        },
        preload: true,
      },
      {
        name: 'qiu6',
        type: RESOURCE_TYPE.SPRITE_ANIMATION,
        src: {
          image: {
            type: 'png',
            url: baseUrl + '/qiu6.png',
          },
          json: {
            type: 'json',
            url: baseUrl + '/qiu6.json',
          },
        },
        preload: true,
      },
      {
        name: 'qiu7',
        type: RESOURCE_TYPE.SPRITE_ANIMATION,
        src: {
          image: {
            type: 'png',
            url: baseUrl + '/qiu7.png',
          },
          json: {
            type: 'json',
            url: baseUrl + '/qiu7.json',
          },
        },
        preload: true,
      },
      {
        name: 'qiu8',
        type: RESOURCE_TYPE.SPRITE_ANIMATION,
        src: {
          image: {
            type: 'png',
            url: baseUrl + '/qiu8.png',
          },
          json: {
            type: 'json',
            url: baseUrl + '/qiu8.json',
          },
        },
        preload: true,
      },
      {
        name: 'qiu9',
        type: RESOURCE_TYPE.SPRITE_ANIMATION,
        src: {
          image: {
            type: 'png',
            url: baseUrl + '/qiu9.png',
          },
          json: {
            type: 'json',
            url: baseUrl + '/qiu9.json',
          },
        },
        preload: true,
      },
      {
        name: 'bgImg',
        type: RESOURCE_TYPE.IMAGE,
        src: {
          image: {
            type: 'png',
            url:
              baseUrl + '/bg.png',
          },
        },
        preload: true,
      },
      {
        name: 'plv',
        type: RESOURCE_TYPE.IMAGE,
        src: {
          image: {
            type: 'png',
            url:
              baseUrl + '/pao-lv.png',
          },
        },
        preload: true,
      },
      {
        name: 'lan',
        type: RESOURCE_TYPE.IMAGE,
        src: {
          image: {
            type: 'png',
            url:
              baseUrl + '/lan.png',
          },
        },
        preload: true,
      },
      {
        name: 'lanb',
        type: RESOURCE_TYPE.IMAGE,
        src: {
          image: {
            type: 'png',
            url:
              baseUrl + '/lanb.png',
          },
        },
        preload: true,
      },
      {
        name: 'lanc',
        type: RESOURCE_TYPE.IMAGE,
        src: {
          image: {
            type: 'png',
            url:
              baseUrl + '/lanc.png',
          },
        },
        preload: true,
      },
      {
        name: 'ren',
        type: RESOURCE_TYPE.IMAGE,
        src: {
          image: {
            type: 'png',
            url:
              baseUrl + '/ren.png',
          },
        },
        preload: true,
      },
    ]);

    const game = new Game({
      systems: [
        new RendererSystem({
          canvas: document.querySelector('#canvas'),
          width: window.innerWidth,
          height: window.innerHeight,
        }),
        new SpriteAnimationSystem(),
        new ImgSystem(),
        new TextSystem(),
        new TransitionSystem(),
        new MaskSystem(),
        new GraphicsSystem(),
        new RenderSystem()
      ],
    });
    /**背景 */
    const bg = new GameObject('bg', {
      position: { x: 0, y: 0 },
      size: { width: window.innerWidth, height: window.innerHeight },
      origin: { x: 0, y: 0 },
    });
    bg.addComponent(
      new Img({
        resource: 'bgImg',
      }),
    );
    /**球 */
    // const qiu = new GameObject('qiu', {
    //   position: { x: -window.innerWidth, y: -200 },
    //   size: { width: window.innerWidth * 3, height: 200 },
    //   origin: { x: 0, y: 0 },
    //   anchor: { x: 0, y: 1 },
    // });
    const qiu = new GameObject('qiu', {
      position: { x: - window.innerWidth / 2 - 100, y: -180 },
      size: { width: window.innerWidth * 2 + 200, height: (window.innerWidth * 2 + 200)*720/1280 },
      origin: { x: 0, y: 0 },
      anchor: { x: 0, y: 1 },
    });
    qiu.addComponent(
      new SpriteAnimation({
        resource: 'qiuS',
        speed: 50,
      }),
    );
    bg.addChild(qiu);
   
    let imgIndex = 1;
    function creaerdQiu(index) {
      let frame = qiu.addComponent(
        new SpriteAnimation({
          resource: 'qiu' + index,
          speed: 50,
          autoPlay: false,
          forwards: true,
        }),
      );
      frame.on('loop', res => {
        // console.info('loop', res)
        // frame.stop();
      })
      frame.on('complete', res => {
        imgIndex++;
        if (imgIndex > 9) {
          imgIndex = 1;
        }
        // qiu.removeComponent(frame);
        // creaerdQiu(imgIndex);
        console.info('complete currentFrame', frame.currentFrame)
        console.info('complete totalFrames', frame.totalFrames)
      })
      frame.on('frameChange', res => {
        console.info('currentFrame', frame.currentFrame)
      })
      frame.play(1);
    }
    // creaerdQiu(imgIndex);
    /**气泡 */
    const pao = new GameObject('pao', {
      position: { x: 120, y: 40 },
      size: { width: 100, height: 100 },
      origin: { x: 0, y: 0 },
    });
    pao.addComponent(
      new Img({
        resource: 'plv',
      }),
    );
    const num = new GameObject('num', {
      position: { x: 0, y: 0 },
      origin: {
        x: 0.5,
        y: 1,
      },
      anchor: {
        x: 0.5,
        y: 0.5,
      },
    });
    num.addComponent(
      new Text({
        text: '40',
        style: {
          fill: 0x3E7700,
          fontSize: 21,
        },
      }),
    );
    const unit = new GameObject('unit', {
      position: { x: 0, y: 0 },
      origin: {
        x: 0.5,
        y: 0,
      },
      anchor: {
        x: 0.5,
        y: 0.5,
      },
    });
    unit.addComponent(
      new Text({
        text: '积分',
        style: {
          fill: 0x3E7700,
          fontSize: 14,
        },
      }),
    );
    pao.addChild(num);
    pao.addChild(unit);

    // 创建动画
    const animation = pao.addComponent(new Transition());
    animation.group = {
      move: [
        {
          name: 'position.y',
          component: pao.transform,
          values: [
            {
              time: 0,
              value: 40,
              tween: 'linear',
            },
            {
              time: 1000,
              value: 60,
              tween: 'linear',
            },
            {
              time: 2000,
              value: 40,
            },
          ],
        },
      ],
    };
    // 开始转动
    animation.play('move', Infinity);

    /**能量球 */
    const lan = new GameObject('lan', {
      position: { x: 260, y: 40 },
      size: { width: 100, height: 100 },
      origin: { x: 0, y: 0 },
    });
    lan.addComponent(
      new Img({
        resource: 'lan',
      }),
    );
    // let ff = lan.addComponent(
    //   new Graphics()
    // );
    // console.info('ff', ff)
    // ff.graphics.beginFill(0xff0000, 1);
    // ff.graphics.drawRect(0, 0, 100, 100);
    // ff.graphics.endFill();

    //添加遮罩
    lan.addComponent(
      new Mask({
        type: MASK_TYPE.Img,
        style: {
          width: 100,
          height: 100,
          x: 0,
          y: 0,
        },
        resource: 'lanc',
      }),
    );

    /**画个波浪 */
    const box = new GameObject('box', {
      position: { x: 0, y: -40 },
      size: { width: 100, height: 100 },
      origin: { x: 0, y: 0 },
    });
    let bo = box.addComponent(
      new Graphics()
    );

    const A = 10; //值越大，曲线上下幅度就越大
    const ω = 3; //值越大，一个周期的宽度越小，曲线就越尖锐
    let φ = 0; //即原点处曲线的位置
    const B = 100;//让曲线整体上下移动
    let draw = () => {
      bo.graphics.clear();
      bo.graphics.beginFill(0x8bb2dc, 1);
      // 从左向右遍历x轴的点
      for (let x = 0; x < 100; x++) {
        // 根据正弦函数计算x对应的y
        const y = A * Math.sin(ω * (x * (Math.PI / 180)) + φ) + B
        if (x === 0) {
          bo.graphics.moveTo(x, y)
        } else {
          bo.graphics.lineTo(x, y)
        }
      }
      bo.graphics.lineTo(100, 0);
      bo.graphics.lineTo(0, 0);
      bo.graphics.endFill();
      φ += 5 * (Math.PI / 180);
      requestAnimationFrame(draw);
    }
    draw();
    const lan2 = new GameObject('lan2', {
      position: { x: 10, y: 10 },
      size: { width: 100, height: 100 },
      origin: { x: 0, y: 0 },
    });
    lan2.addComponent(
      new Img({
        resource: 'lan',
      }),
    );

    lan.addChild(box);

    /**添加进场景 */
    // game.scene.addChild(bg);
    // game.scene.addChild(qiu);
    // game.scene.addChild(pao);
    // game.scene.addChild(lan);
    // game.scene.addChild(lan2);
    // game.scene.addChild(box);
    /**加载进度条 */
    const StartX = 60;
    const StartY = window.innerHeight / 2 - 50;
    const WIDTH = window.innerWidth - 120;
    const HEIGHT = 50;
    const outer = new GameObject('outer');
    const inner = new GameObject('inner');
    const outterGraphics = outer.addComponent(new Graphics());
    const innerGraphics = inner.addComponent(new Graphics());

    outterGraphics.graphics.beginFill(0xffffff, 1);
    outterGraphics.graphics.drawRect(StartX, StartY, WIDTH, HEIGHT);
    outterGraphics.graphics.endFill();
    // 加载进度更新
    resource.on(LOAD_EVENT.PROGRESS, e => {
      const percent = e.resourceLoadedCount / e.resourceTotal;
      innerGraphics.graphics.beginFill(0xfeca2f, 1);
      innerGraphics.graphics.drawRect(StartX, StartY, WIDTH * percent, HEIGHT);
      innerGraphics.graphics.endFill();
    });

    // 资源加载完成后，加载菜单场景
    resource.on(LOAD_EVENT.COMPLETE, () => {
      game.scene.removeChild(outer);
      game.scene.removeChild(inner);
      game.scene.addChild(bg);
      game.scene.addChild(pao);
      game.scene.addChild(lan);
      game.scene.addChild(lan2);
    });
    game.scene.addChild(outer);
    game.scene.addChild(inner);
    resource.preload();
  }
}
</script>
<style lang="scss">
#canvas {
  width: 100%;
}
</style>